<!--
  Author: 善良的YWJ
  Created by shanliangdeYWJ on 2020/09/09
  File: 05.3解决异步设置值每个组件都是独立的.html
  Description: "
  
   请输入文件描述内容
  
               " 
  Github: https://github.com/shanliangdeYWJ
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <title>05Comment组件</title>
  <style>
    * {
      /* border: 1px solid #ccc; */
    }


    svg {
      width: 0;
      height: 0;
    }

    body {
      /* background-color: #000; */
    }

    .box {
      position: relative;
      width: 200px;
      height: 200px;
    }

    .loader {
      position: relative;
      width: 100%;
      height: 100%;
      filter: url(#gooey)
    }

    .loader span {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
      border-radius: 50%;
      animation: animate 4s ease-in-out infinite;
      animation-delay: calc(0.2s * var(--i));
    }


    .loader span::before {
      content: '';
      position: absolute;
      top: 0;
      left: calc(50% - 20px);
      width: 40px;
      height: 40px;
      background: linear-gradient(#fbfcec, #03a9f4);
      border-radius: 50%;
      box-shadow: 0 0 20px #03a9f4;
    }

    @keyframes animate {
      0% {
        transform: rotate(0deg);
      }

      50%,
      100% {
        transform: rotate(360deg);
      }
    }

    .nameBox {
      position: absolute;
      bottom: -20px;
      left: 0;
      width: 200px;
      height: 40px;
      background: linear-gradient(#fbfcec, #03a9f4);
    }

    .name {
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translate(-50%);
    }
  </style>
</head>

<body>
  <div id="root">
  </div>

  <!-- 加载 React。-->
  <!-- <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> -->
  <script src="../js/react@16.development.js"></script>
  <script src="../js/react-dom@16.development.js"></script>
  <script src="../js/babel@6.min.js"></script>

  <!-- 加载我们的 React 组件。-->
  <script type="text/babel">

    function Loading(props) {
      const items = props.numbers.map((item) => {
        return (
          <span key={item} style={{ '--i': item }}></span>
        )
      })
      return (
        <div className="box">
          <div className="loader">
            {items}
            <svg>
              <filter id="gooey">
                <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
                <feColorMatrix values="
              1 0 0 0 0
              0 1 0 0 0
              0 0 1 0 0
              0 0 0 20 -10
              " />
              </filter>
            </svg>
            <div className="nameBox"></div>
          </div>
          <div className="name">shanliangdeYWJ</div>
        </div>
      )
    }

    const numbers = [1, 2, 3, 4, 5, 6, 7]

    ReactDOM.render(
      <Loading numbers={numbers} />,
      document.getElementById('root')
    )
  </script>
</body>

</html>